<!-- Dom模板 -->
<template>
  <div class="box">
    <!-- Dom内容 -->
    <div class="top">
      <span
        id="zuojiantou"
        @click="back"
        class="iconfont icon-arrow-left-copy-copy"
      ></span>
      <span class="pay">Maco蛋充值</span>
    </div>
    <div class="con">
      <!-- 余额 -->
      <div class="residue">
        <p class="mon">{{numMaco}}</p>
        <p class="text">您的Maco蛋余额</p>
      </div>
      <!-- 充值选项 -->
      <div class="nubbly">
        <div
          v-for="(item, index) in data"
          :key="index"
          @click="liClick(index, item)"
          id="nubbly-1"
          :class="nowIndex === index ? 'active' : ''"
        >
          <p
            id="red"
            @click="pClick(index)"
            :class="nowIndex === index ? 'active-red' : 'black'"
          >
            {{ item.money }}元
          </p>
          <p class="ccc">{{ item.money * 10 }}Maco蛋</p>
        </div>
      </div>
      <!-- 充值说明 -->
      <div class="msg">
        <p>—————&nbsp;&nbsp;&nbsp;充值说明&nbsp;&nbsp;&nbsp;—————</p>
        <p>一元可充值10个Maco蛋</p>
      </div>
    </div>
    <div class="down">
      <button @click="wechat">立即充值</button>
    </div>
    {{nums}}
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import * as apis from "../../api/home"
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      data: [
        { money: "6", age: "60" },
        { money: "18", age: "180" },
        { money: "50", age: "500" },
        { money: "118", age: "1180" },
        { money: "218", age: "2180" },
        { money: "488", age: "4880" },
        { money: "618", age: "6180" },
        { money: "998", age: "9980" },
      ],
      item: {},
      nowIndex: 0,
      numMaco:0
      //   money: { data },
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  computed:{
    nums(){
    console.log(this.$store.state.order.user.title)

      apis.numMaco({Id:this.$store.state.order.user.title}).then((data)=>{
        console.log(data.data.code[0].Maco)
        this.numMaco = data.data.code[0].Maco
      })
    }
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.item = this.data[0];
  },
  // Vue方法定义
  methods: {
    liClick(index, item) {
      this.nowIndex = index;
      this.item = item;
      // console.log("jjdhgjf", item);
    },
    pClick(index) {
      this.nowIndex = index;
    },
    wechat() {
      this.$router.push({
        path: `/weChat`,
        query: { item: JSON.stringify(this.item) },
      });
    },
    back() {
      this.$router.push("/MacoAge");
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../../assets/font/iconfont.css");
.box {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: white;
}
.top {
  width: 100%;
  height: 55px;
  display: flex;
  line-height: 55px;
  border-bottom: 1px solid #ccc;
}
#zuojiantou {
  font-size: 24px;
  font-weight: 600;
  color: #c3c3c3;
  padding-left: 5px;
}

.pay {
  padding-left: 35%;
  font-size: 18px;
  font-weight: 600;
}
/* 余额 */
.residue {
  padding-top: 20px;
  width: 100%;
  height: 150px;
  line-height: 40px;
  /* background: wheat; */
  text-align: center;
}
.mon {
  font-size: 30px;
}
.text {
  color: #a8a8a8;
}
.nubbly {
  display: flex;
  justify-content: space-around;
  width: 100%;
  flex-wrap: wrap;
  text-align: center;
  height: calc(100vh - 450px);
}
#nubbly-1 {
  width: 28%;
  background: rgb(242, 243, 247);
  margin-right: 5px;
  padding-top: 20px;
  margin-top: 10px;
  /* height: 33.33%; */
}
.active {
  border: 1px solid rgb(218, 44, 10);
}
#nubbly-1 .active-red {
  color: rgb(218, 44, 10);
}
#nubbly-1 #red {
  font-size: 18px;
}
#nubbly-1 .ccc {
  color: rgb(175, 176, 180);
  font-size: 14px;
}
#nubbly-1 {
  color: black;
}
/* 充值说明 */
.msg {
  font-size: 14px;
  color: rgb(161, 161, 161);
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
/* 充值按钮 */
.down {
  text-align: center;
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 20px;
}
.down button {
  width: 90%;
  border: none;
  height: 50px;
  background: rgb(242, 53, 27);
  color: white;
  text-align: center;
  font-size: 16px;
}
</style>